<template>
  <div id="myChart4" style="width: 300px;height: 200px;"></div>
</template>

<script>
export default {
  name: "humidity",
  methods:{
    drawLine(){
      const setEchartWH = {
        width: 300,
        height: 200
      };
      var chartDom = document.getElementById('myChart4');
      var myChart = this.$echarts.init(chartDom,null,setEchartWH);
      var option;
      option = {
        series: [
          {
            type: 'gauge',
            axisLine: {
              lineStyle: {
                width: 18,
                color: [
                  [0.3, '#67e0e3'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            pointer: {
              itemStyle: {
                color: 'auto'
              }
            },
            axisTick: {
              distance: -30,
              length: 8,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            splitLine: {
              distance: -30,
              length: 25,
              lineStyle: {
                color: '#fff',
                width: 2
              }
            },
            axisLabel: {
              color: 'auto',
              distance: -47,
              fontSize: 15
            },
            detail: {
              valueAnimation: true,
              formatter: '{value} %',
              color: 'auto',
              fontSize: 23
            },
            data: [
              {
                value: 70
              }
            ]
          }
        ]
      };
      setInterval(function () {
        myChart.setOption({
          series: [
            {
              data: [
                {
                  value: +(60+Math.random() * 10).toFixed(2)
                }
              ]
            }
          ]
        });
      }, 2000);
      option && myChart.setOption(option);
    }
  },
  mounted() {
    this.drawLine();
  }
}
</script>

<style scoped>

</style>
